<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>服务器监控状态 - 金零社</title>
    <!-- 使用本地Font Awesome替代CDN -->
    <link href="../../static/element/font-awesome.css" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background-color: #1a1a2e;
            color: #e2e8f0;
            height: 100vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        /* 导航栏 */
        .navbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 15px 20px;
            background: linear-gradient(135deg, #9C27B0, #7B1FA2);
            color: white;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .navbar-left {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .back-button {
            background: none;
            border: none;
            color: white;
            font-size: 20px;
            cursor: pointer;
            padding: 5px;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-color 0.3s ease;
        }

        .back-button:hover {
            background-color: rgba(255, 255, 255, 0.2);
        }

        .chat-icon {
            font-size: 24px;
            background-color: white;
            color: #9C27B0;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .page-title {
            font-size: 18px;
            font-weight: 600;
        }

        /* 主体内容 */
        .main-content {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        /* 卡片样式 */
        .card {
            background-color: #1e293b;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }

        .card-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #334155;
        }

        .card-header i {
            font-size: 20px;
            color: #9C27B0;
        }

        .card-header h2 {
            font-size: 20px;
            font-weight: 600;
        }

        /* 服务器列表 */
        .servers-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }

        .server-card {
            background-color: #334155;
            border-radius: 10px;
            padding: 20px;
            transition: transform 0.3s ease;
        }

        .server-card:hover {
            transform: translateY(-5px);
        }

        .server-card-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 15px;
        }

        .server-icon {
            font-size: 24px;
            color: #9C27B0;
        }

        .server-name {
            font-size: 18px;
            font-weight: 600;
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .server-url {
            font-size: 12px;
            color: #94a3b8;
            margin-bottom: 15px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* 状态指示器 */
        .status-indicator {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 15px;
            padding: 8px 12px;
            border-radius: 6px;
        }

        .status-indicator.normal {
            background-color: rgba(16, 185, 129, 0.15);
            border: 1px solid #10B981;
        }

        .status-indicator.warning {
            background-color: rgba(245, 158, 11, 0.15);
            border: 1px solid #F59E0B;
        }

        .status-indicator.danger {
            background-color: rgba(239, 68, 68, 0.15);
            border: 1px solid #EF4444;
        }

        .status-icon {
            width: 12px;
            height: 12px;
            border-radius: 50%;
        }

        .status-icon.normal {
            background-color: #10B981; /* 绿色 */
        }

        .status-icon.warning {
            background-color: #F59E0B; /* 黄色 */
        }

        .status-icon.danger {
            background-color: #EF4444; /* 红色 */
        }

        .status-text {
            font-size: 14px;
            font-weight: 500;
        }

        /* 资源使用详情 */
        .resource-details {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }

        .resource-card {
            background-color: #1e293b;
            border-radius: 8px;
            padding: 15px;
        }

        .resource-card h4 {
            font-size: 14px;
            margin-bottom: 10px;
            color: #cbd5e1;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .resource-value {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 5px;
        }

        .resource-value.normal {
            color: #10B981;
        }

        .resource-value.warning {
            color: #F59E0B;
        }

        .resource-value.danger {
            color: #EF4444;
        }

        .resource-progress {
            height: 6px;
            background-color: #475569;
            border-radius: 3px;
            overflow: hidden;
            margin-top: 8px;
        }

        .resource-progress-bar {
            height: 100%;
            border-radius: 3px;
        }

        .resource-progress-bar.normal {
            background-color: #10B981;
        }

        .resource-progress-bar.warning {
            background-color: #F59E0B;
        }

        .resource-progress-bar.danger {
            background-color: #EF4444;
        }

        /* 更新时间 */
        .last-update {
            text-align: center;
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px solid #334155;
            color: #94a3b8;
            font-size: 14px;
        }

        /* 加载状态 */
        .loading, .error {
            text-align: center;
            padding: 40px 20px;
        }

        .spinner {
            border: 4px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top: 4px solid #9C27B0;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 0 auto 20px;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .main-content {
                padding: 15px;
            }
            
            .servers-grid {
                grid-template-columns: 1fr;
            }
            
            .navbar {
                padding: 10px 15px;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <div class="navbar">
        <div class="navbar-left">
            <button class="back-button" id="backButton">
                <i class="fas fa-arrow-left"></i>
            </button>
            <div class="chat-icon">
                <i class="fas fa-server"></i>
            </div>
            <div class="page-title">服务器监控状态</div>
        </div>
    </div>
    
    <!-- 主体内容 -->
    <div class="main-content">
        <div class="card">
            <div class="card-header">
                <i class="fas fa-network-wired"></i>
                <h2>服务器集群状态</h2>
            </div>
            
            <div id="serversContainer">
                <div class="loading">
                    <div class="spinner"></div>
                    <p>正在加载服务器信息...</p>
                </div>
            </div>
        </div>
        
        <!-- 更新时间 -->
        <div class="last-update">
            最后更新时间: <span id="lastUpdate">-</span>
        </div>
    </div>

    <script>
        // 返回聊天页面
        document.getElementById('backButton').addEventListener('click', function() {
            // 获取referrer或者默认返回聊天页面
            const referrer = document.referrer;
            if (referrer && referrer.includes('mx_chat.html')) {
                history.back();
            } else {
                // 如果没有referrer或者不是从聊天页面来的，则返回聊天页面
                const urlParams = new URLSearchParams(window.location.search);
                const topic = urlParams.get('topic') || 'default';
                window.location.href = `mx_chat.html?topic=${encodeURIComponent(topic)}`;
            }
        });

        // 硬编码服务器列表（替代从CONFIG_STATION.MD文件中读取）
        function loadServerList() {
            // 从CONFIG_STATION.MD文件中提取的服务器列表
            const servers = [
                {
                    name: "内网移动",
                    url: "https://2030.yamhk.top/"
                },
                {
                    name: "内网主站",
                    url: "https://2025.task2030.xyz/"
                },
                {
                    name: "内网备用",
                    url: "https://zjnh.yamhk.top/"
                },
                {
                    name: "外网中转",
                    url: "https://www.yamhk.top/"
                }
            ];
            
            return Promise.resolve(servers);
        }

        // 模拟获取服务器状态（实际项目中应该调用真实的API）
        function getServerStatus(server) {
            // 模拟网络延迟
            return new Promise(resolve => {
                setTimeout(() => {
                    // 生成随机的CPU和内存使用率
                    const cpuUsage = Math.random() * 100;
                    const memoryUsage = Math.random() * 100;
                    const threshold = 80;
                    
                    // 确定状态类别
                    let statusClass = 'normal';
                    let statusText = '运行正常';
                    
                    if (cpuUsage > threshold || memoryUsage > threshold) {
                        statusClass = 'danger';
                        statusText = '负载过高';
                    } else if (cpuUsage > threshold * 0.8 || memoryUsage > threshold * 0.8) {
                        statusClass = 'warning';
                        statusText = '负载偏高';
                    }
                    
                    resolve({
                        name: server.name,
                        url: server.url,
                        statusClass,
                        statusText,
                        cpuUsage,
                        memoryUsage,
                        threshold,
                        lastCheckTime: new Date()
                    });
                }, Math.random() * 1000 + 500); // 随机延迟500-1500ms
            });
        }

        // 渲染单个服务器卡片
        function renderServerCard(serverStatus) {
            const isOverloaded = serverStatus.statusClass === 'danger';
            const isWarning = serverStatus.statusClass === 'warning';
            const cpuUsage = serverStatus.cpuUsage;
            const memoryUsage = serverStatus.memoryUsage;
            const threshold = serverStatus.threshold;
            
            // 根据使用率设置CPU颜色
            let cpuStatusClass = 'normal';
            if (cpuUsage > threshold) {
                cpuStatusClass = 'danger';
            } else if (cpuUsage > threshold * 0.8) {
                cpuStatusClass = 'warning';
            }
            
            // 根据使用率设置内存颜色
            let memoryStatusClass = 'normal';
            if (memoryUsage > threshold) {
                memoryStatusClass = 'danger';
            } else if (memoryUsage > threshold * 0.8) {
                memoryStatusClass = 'warning';
            }
            
            return `
                <div class="server-card">
                    <div class="server-card-header">
                        <div class="server-icon">
                            <i class="fas fa-server"></i>
                        </div>
                        <div class="server-name" title="${serverStatus.name}">${serverStatus.name}</div>
                    </div>
                    <div class="server-url" title="${serverStatus.url}">${serverStatus.url}</div>
                    <div class="status-indicator ${serverStatus.statusClass}">
                        <div class="status-icon ${serverStatus.statusClass}"></div>
                        <div class="status-text">${serverStatus.statusText}</div>
                    </div>
                    <div class="resource-details">
                        <div class="resource-card">
                            <h4><i class="fas fa-microchip"></i> CPU</h4>
                            <div class="resource-value ${cpuStatusClass}">${cpuUsage.toFixed(1)}%</div>
                            <div class="resource-progress">
                                <div class="resource-progress-bar ${cpuStatusClass}" style="width: ${cpuUsage}%"></div>
                            </div>
                        </div>
                        <div class="resource-card">
                            <h4><i class="fas fa-memory"></i> 内存</h4>
                            <div class="resource-value ${memoryStatusClass}">${memoryUsage.toFixed(1)}%</div>
                            <div class="resource-progress">
                                <div class="resource-progress-bar ${memoryStatusClass}" style="width: ${memoryUsage}%"></div>
                            </div>
                        </div>
                    </div>
                </div>
            `;
        }

        // 渲染所有服务器状态
        async function renderServers() {
            const container = document.getElementById('serversContainer');
            
            try {
                // 显示加载状态
                container.innerHTML = `
                    <div class="loading">
                        <div class="spinner"></div>
                        <p>正在加载服务器信息...</p>
                    </div>
                `;
                
                // 获取服务器列表
                const servers = await loadServerList();
                
                if (servers.length === 0) {
                    container.innerHTML = `
                        <div class="error">
                            <p>未能加载服务器列表</p>
                        </div>
                    `;
                    return;
                }
                
                // 获取所有服务器状态
                const serverStatuses = await Promise.all(
                    servers.map(server => getServerStatus(server))
                );
                
                // 渲染服务器卡片
                if (serverStatuses.length > 0) {
                    const cardsHtml = serverStatuses.map(status => renderServerCard(status)).join('');
                    container.innerHTML = `<div class="servers-grid">${cardsHtml}</div>`;
                } else {
                    container.innerHTML = `
                        <div class="error">
                            <p>未找到服务器信息</p>
                        </div>
                    `;
                }
                
                // 更新最后检查时间
                document.getElementById('lastUpdate').textContent = new Date().toLocaleString('zh-CN');
            } catch (error) {
                console.error('渲染服务器信息失败:', error);
                container.innerHTML = `
                    <div class="error">
                        <p>加载服务器信息失败: ${error.message}</p>
                    </div>
                `;
            }
        }

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 立即更新一次服务器状态
            renderServers();
            
            // 每分钟自动更新一次服务器状态
            setInterval(renderServers, 60000);
        });
    </script>
</body>
</html>